<template>
	<div class="container center-block" style="max-width: 600px;">
		<form>
			<h3 class="text-success text-center">请输入一个中文姓名</h3>
			<div class="input-group">
				<input type="text" ref="name_input" v-model="form.name" name="name" class="form-control">
				<span class="input-group-addon" v-on:click="clearInput()">
					<span class="glyphicon glyphicon-remove"></span>
				</span>
			</div>
			<div class="row">
				<div class="col-sm-12 text-center">
					<input type="button" v-on:click="predictNewName()" class="btn btn-success" style="margin-top: 10px;"
						value="推理" />
				</div>
			</div>
		</form>
		<br />
		<!-- Vue 模板 开始 -->
		<div v-if="result" class="alert alert-info alert-dismissible">
			<button type="button" class="btn-close" v-on:click="hiddenResult()"></button>
			<strong>{{result.name}}</strong>&nbsp;是 <strong>{{result.gender}}生</strong>， 预测概率为：
			{{result.accuracy}}
			<br>
			<p style="margin-top: 20px;margin-bottom: 10px;">预测结果接近0.5表示为姓名偏中性</p>
		</div>
		<div v-if="err" class="alert alert-danger alert-dismissible">
			<button type="button" class="btn-close" v-on:click="hiddenErr()"></button>
			<strong>{{ err }}</strong>
		</div>
		<!-- Vue 模板 结束 -->
	</div>
	<div class="row footer" style="bottom: 0px; width: 100%;position: fixed;z-index: -10;font-family: Consolas;">
		<p class="text-center"><strong>Copyright</strong> © 2021 <strong>邓永盛</strong>. <strong>All rights
				reserved.</strong></p>
		<p class="text-center"><a href="https://beian.miit.gov.cn/">鄂ICP备2021018056号-1</a></p>
		<p class="text-center">
			<a href="https://gitee.com/deng-yongsheng"><strong>Git</strong>主页</a>
			<a href="mailto:dys.tj@qq.com?subject=来自gp.dengyongsheng.cn的访客">dys.tj@qq.com</a>
		</p>
	</div>
</template>

<script>
	import axios from 'axios';
	import qs from 'qs';
	export default {
		data() {
			return {
				form: {
					name: '',
				},
				result: null,
				err: '',
			};
		},
		methods: {
			predict(name) {
				// post请求，异步查询姓名对应的性别
				axios.post('./', {
					name: name,
				}).then(res => {
					// 隐藏结果消息
					this.hiddenResult();
					// 隐藏错误消息
					this.hiddenErr();
					if (res.err != undefined) {
						// 显示错误消息
						this.err = res.data.err;
					} else {
						// 显示结果消息
						this.result = res.data;
					}
				}).catch(err => {
					this.err = err;
				});
			},
			predictNewName() {
				if (this.form.name.length > 0) {
					this.predict(this.form.name);
				} else {
					this.err = '请输入一个中文名字';
					this.$refs.name_input.focus();
				}
			},
			hiddenErr() {
				// 让错误消息不再显示
				this.err = undefined;
			},
			hiddenResult() {
				// 让结果消息不再显示
				this.result = undefined;
			},
			clearInput() {
				// 清空输入框
				this.form.name = '';
				// 将焦点移动到输入框
			}
		},
		created() {
			var url_split = location.href.split('?', 2);
			if (url_split.length > 1) {
				var params = qs.parse(url_split[1]);
				if (params.name != undefined) {
					console.log(params.name);
					this.predict(params.name);
				}
			}
		}
	};
</script>

<style>
	body {
		min-height: 400px;
		height: 100%;
	}

	.btn-close {
		font-size: small;
	}

	.input-group-addon:hover {
		transition-duration: 0.4s;
		box-shadow: 0 0 4 4 #0F0F0F;
		filter: brightness(0.8);
	}

	.footer a {
		color: #000000;
	}
</style>
